<template>
  <div class="account-auth">
    <!-- 抖音账号 -->
    <!-- 在开发环境中展示抖音授权 -->
    <div class="wrapper-cell">
      <div class="top-cell">
        <img src="@/assets/image/douyin.png" alt="" class="platform-img">
        <div class="platform">抖音账号</div>
        <div 
          @click="getAuthUrl('douyin')"
          v-if="douyin.isBind"
          class="top-cell-right">
          <span class="blue-text">重新授权</span>
          <img src="@/assets/image/blue-right.png" alt="" class="blue-right"/>
        </div>
      </div>
      <div class="inner-cell" v-if="douyin.isBind">
        <div class="user-avatar-wrapper">
          <img :src="douyin.head_image" alt="" v-if="douyin.head_image"/>
          <img src="@/assets/image/default-avatar.jpeg" alt="" v-else/>
        </div>
        <div class="inner-cell-center">
          <p class="user-name">{{ douyin.nickname }}</p>
        </div>
        <div class="date red-text" v-if="douyin.is_overdue">已过期</div>
        <div class="date" v-else>有效期{{ douyin.expireDay }}天</div>
      </div>
      <div class="inner-cell" v-else>
        <div class="user-avatar-wrapper"></div>
        <div class="inner-cell-center">
          <p class="unbind-user-name">未绑定账号</p>
        </div>
        <div class="bind" @click="getAuthUrl('douyin')">点击绑定</div>
      </div>
    </div>

    <!-- 快手账号 -->
    <div class="wrapper-cell">
      <div class="top-cell">
        <img src="@/assets/image/kuaishou.png" alt="" class="platform-img">
        <div class="platform">快手账号</div>
        <div 
          @click="getAuthUrl('kuaishou')"
          class="top-cell-right" v-if="kuaishou.isBind">
          <span class="blue-text">重新授权</span>
          <img src="@/assets/image/blue-right.png" alt="" class="blue-right"/>
        </div>
      </div>
      <div class="inner-cell" v-if="kuaishou.isBind">
        <div class="user-avatar-wrapper">
          <img :src="kuaishou.head_image" alt="" v-if="kuaishou.head_image"/>
          <img src="@/assets/image/default-avatar.jpeg" alt="" v-else/>
        </div>
        <div class="inner-cell-center">
          <p class="user-name">{{ kuaishou.nickname }}</p>
          <!-- <p class="user-mobile">手机号：{{ item.userInfo.phone }}</p> -->
        </div>
        <div class="date red-text" v-if="kuaishou.is_overdue">已过期</div>
        <div class="date" v-else>有效期{{ kuaishou.expireDay }}天</div>
      </div>
      <div class="inner-cell" v-else>
        <div class="user-avatar-wrapper"></div>
        <div class="inner-cell-center">
          <p class="unbind-user-name">未绑定账号</p>
          <!-- <p class="unbind-mobile">无信息</p> -->
        </div>
        <div class="bind" @click="getAuthUrl('kuaishou')">点击绑定</div>
      </div>
    </div>

    <!-- 哔哩哔哩账号 -->
    <!-- <div class="wrapper-cell">
      <div class="top-cell">
        <img src="@/assets/image/bli.png" alt="" class="platform-img">
        <div class="platform">哔哩哔哩账号</div>
        <div 
          @click="showDialog = true"
          class="top-cell-right" v-if="bilibili.is_overdue">
          <span class="blue-text">重新授权</span>
          <img src="@/assets/image/blue-right.png" alt="" class="blue-right"/>
        </div>
      </div>
      <div class="inner-cell" v-if="bilibili.isBind">
        <div class="user-avatar-wrapper">
          <img src="@/assets/image/platform-avatar.png" alt=""/>
        </div>
        <div class="inner-cell-center">
          <p class="user-name">{{ bilibili.nickname }}</p>
        </div>
      </div>
      <div class="inner-cell" v-else>
        <div class="user-avatar-wrapper"></div>
        <div class="inner-cell-center">
          <p class="unbind-user-name">未绑定账号</p>
          <p class="unbind-mobile">无信息</p>
        </div>
        <div class="bind" @click="showDialog = true">点击绑定</div>
      </div>
    </div> -->
    <div>
      <p class="iframe-mask" v-if="showIframe"></p>
      <iframe 
        class="iframe"
        v-if="showIframe"
        :src="iframeUrl" 
        frameborder="0"></iframe>
      <p class="iframe-tip" v-if="showIframe">
        二维码有效期仅两分钟，请尽快截图保存<br />
        再打开快手app扫码登录绑定
      </p>
    </div>
   

    <img 
      v-if="showIframe"
      src="@/assets/image/close-dialog.png" alt="" 
      class="close-iframe" @click="closeIframe"/>
   
    <van-popup v-model="showDialog">
      <div class="dialog-content">
        <div class="dialog-title">{{ currentType }}授权方法</div>
        <div class="dialog-tip">请屏幕截图二维码后，打开“{{ currentType }}APP”扫码确认授权即可绑定账号。</div>
        <!-- <div class="qr" style="margin-top:20px" id="qrcode"></div> -->
        <img :src="qrImageUrl" alt="" class="qr" style="margin-top:20px" id="qrcode"/>
        <!-- <div class="blue-tip">不太会？快来看看平台授权视频教程</div> -->
        <!-- TODO 教学视频需要更换 -->
        <!-- <video 
          src="https://oss.dev.shijiayun.cn/cpms/video/def8b4dfb74a4ff9b68e0c0a7ab7ed56.mp4"></video> -->
        <div class="know" @click="showDialog = false">我知道了</div>
      </div>
    </van-popup>


    <van-popup v-model="showDouyin">
      <div class="douyin-dialog-content">
        <img 
          @click="showDouyin = false"
          src="@/assets/image/close-dialog-btn.png" alt="" 
          class="close-dialog"/>
        <div class="dialog-title">抖音授权方法</div>
        <div class="douyin-tip">
          因抖音政策限制，目前仅支持在电脑端打开网页扫码登录或账号登录授权
        </div>
        <div class="douyin-step">
          1､ 请先复制以下抖音授权地址链接。
        </div>
        <div class="douyin-step">
          2、打开您的电脑，并打开浏览器，在浏览器地址栏中粘贴授权地址。
        </div>
        <div class="douyin-step">
          3、打开抖音账号授权页面后。您可以用抖音APP扫一扫登录授权，或者直接在页面上用抖音账号登录授权。
        </div>
        <div class="douyin-url-wrapper">
          <div class="douyin-url">{{ douyinUrl }}</div>
        </div>
        <div class="douyin-copy-url" @click="copyUrl">复制授权链接</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { listBindingPlatform  } from '@/api/account'
import { getOssDomain } from '@/api/oss'
import { getDouyinAuthUrl, getKuaishouAuthUrl } from '@/api/selfuse'
import QRCode from 'qrcodejs2-fix'
import { downloadByUrl, copy } from '@/utils/index'
import axios from 'axios'
import { Toast } from 'vant'

export default {
  data () {
    return {
      showDialog: false,
      showDouyin: false,
      bilibili: {},
      kuaishou: {},
      douyin: {},
      showIframe: false,
      oss_domain: '',
      iframeUrl: '',
      currentType: '抖音',
      qrImageUrl: '', // 二维码链接地址
      douyinUrl: '',
    }
  },
  computed: {
    isDevEnv () {
      return process.env.NODE_ENV !== 'production'
    }
  },
  async mounted () {
    if (!sessionStorage.getItem('oss_domain')) {
      const res = await getOssDomain()
      sessionStorage.setItem('oss_domain', res.domain)
      this.oss_domain = res.domain
    } else {
      this.oss_domain = sessionStorage.getItem('oss_domain')
    }
    this.getList()
    document.title = '平台账号授权'
  },
  watch: {
    showDialog(val) {
      if(!val) this.getList()
    }
  },
  methods: {
    copyUrl () {
      copy(this.douyinUrl, () => {
        Toast('复制成功')
      })
    },
    saveQrcode () {
      this.showDialog = false
      downloadByUrl(this.qrImageUrl, '邀请二维码.png')
    },
    closeIframe () {
      this.showIframe = false
      console.log('iframeClick')
      this.getList()
    },
    getAuthUrl (platform) {
      if (platform === 'douyin') {
        this.currentType = '抖音'
        getDouyinAuthUrl().then(res => {
          console.log('douyin auth url:', res)
          this.douyinUrl = res.auth_url
          this.showDouyin = true
        })
      }
      if (platform === 'kuaishou') {
        this.currentType = '快手'
        const baseUrl = process.env.VUE_APP_BASE_URL
        axios({
          method: 'get',
          url: baseUrl + '/api/kuaishou/authQrcode',
          headers: {
            token: sessionStorage.getItem('token')
          }
        }).then(res => {
          console.log('kuaishou res:', res)
          // console.log('快手二维码： ', res.data)
          // let blob = new Blob([res.data]);
          // const url = window.URL.createObjectURL(blob);
          this.qrImageUrl = `${this.oss_domain}/${res.data.auth_qr}`
          // console.log('快手二维码：', url)
          this.showDialog = true
        })
        return
      }
    },
    getList () {
      listBindingPlatform().then(res => {
        console.log('bind res:', res)
        for (let key in res) {
          if (res[key]) {
            res[key].isBind = true
            if (res[key].head_image) {
              res[key].head_image = `${this.oss_domain}/${res[key].head_image}`
            }
            const overdue_time = new Date(res[key].auth_expires)
            const nowTime = Date.now()
            if (nowTime > overdue_time) {
              res[key].is_overdue = true
            } else {
              const diff = Math.ceil((overdue_time - nowTime) / (24 * 3600 * 1000))
              res[key].expireDay = diff
            }
          }
        }
        const { bilibili, kuaishou, douyin } = res
        this.bilibili = bilibili || { isBind: false }
        this.kuaishou = kuaishou || { isBind: false }
        this.douyin = douyin || { isBind: false }
      })
    },
    show () {
      this.showDialog = true
    }
  }
}
</script>

<style scoped>
.douyin-tip {
  margin-bottom: 3.47vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: normal;
  line-height: 4.53vw;
  color: #FF0000;
}
.close-dialog {
  position: absolute;
  right: 3.2vw;
  top: 3.73vw;
  width: 2.8vw;
  height: 2.8vw;
}
.douyin-url-wrapper {
  box-sizing: border-box;
  width: 100%;
  height: 13.33vw;
  padding: 1.87vw;
  background: #fff;
  border-radius: 1.07vw;
  margin-top: 4.27vw;
  margin-bottom: 5.33vw;
}
.douyin-url {
  /* white-space: nowrap; */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  width: 100%;
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: normal;
  color: #B0ABAB;
}
.douyin-dialog-content {
  box-sizing: border-box;
  padding: 4vw 5.33vw 6.4vw 5.33vw;
  width: 71.73vw;
  border-radius: 3.2vw;
  background: #F8F8FA;
  box-sizing: border-box;
  border: 0.5px solid #E9E9E9;
  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.12);
}
.douyin-step {
  margin-bottom: 1.6vw;
  font-family: 思源黑体;
  font-size: 3.2vw;
  color: #333333;
}
.douyin-step:last-of-type {
  margin-bottom: 4.27vw;
}
.douyin-copy-url {
  margin: 0 auto;
  width: 60.8vw;
  height: 8.53vw;
  border-radius: 1.07vw;
  background: linear-gradient(98deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
  font-family: 思源黑体;
  font-size: 3.2vw;
  font-weight: 500;
  line-height: 8.53vw;
  text-align: center;
  color: #FFFFFF;
}
.iframe-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background: #333333;
  z-index: 3;
}
.close-iframe {
  position: absolute;
  top: 5vw;
  right: 5vw;
  width: 6vw;
  height: 6vw;
  z-index: 10;
  transform: translateZ(2px);
}
.iframe {
  position: fixed;
  left: 50%;
  top: 12vw;
  width: 80vw;
  height: 155vw;
  z-index: 10;
  transform: translateX(-50%);
}
.iframe-tip {
  position: fixed;
  top: 172vw;
  left: 0;
  width: 100vw;
  text-align: center;
  font-size: 4vw;
  color: #fff;
  z-index: 10;
}
#qrcode {
  width: 56.93vw;
  height: 56.93vw;
  margin: 0 auto 8.13vw;
}
::v-deep #qrcode img {
  display: block;
  width: 100%;
  height: 100%;
}
::v-deep #qrcode canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.user-mobile {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 22px;
  color: #999999;
}
.user-name {
  margin-bottom: 0.8vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #666666;
}
.unbind-mobile {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  line-height: 5.87vw;
  color: #999999;
}
.unbind-user-name {
  margin-bottom: 0.8vw;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  line-height: 5.87vw;
  color: #999999;
}
.bind {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: 600;
  color: #006EDD;
}
.date {
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #00A6A6;
}
.inner-cell-center {
  flex: 1;
}
.user-avatar-wrapper {
  width: 12.27vw;
  height: 12.27vw;
  border-radius: 50%;
  background: #CCCCCC;
  margin-right: 2.13vw;
  overflow: hidden;
}
.user-avatar-wrapper > img {
  display: block;
  width: 100%;
  height: 100%;
}
.inner-cell {
  box-sizing: border-box;
  padding: 0 2.67vw 0 3.2vw;
  width: 83.47vw;
  height: 19.2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #F8F8FA;
  border-radius: 1.07vw;
}
.account-auth {
  position: relative;
  padding-top: 5.33vw;
}
.blue-text {
  font-family: Source Sans Pro;
  font-size: 3.2vw;
  font-weight: 600;
  color: #006EDD;
}
.top-cell-right {
  display: flex;
  align-items: center;
}
.blue-right {
  width: 3.2vw;
  height: 3.2vw;
}
.wrapper-cell {
  background: #FFFFFF;
  border-radius: 2.13vw;
  box-sizing: border-box;
  padding: 3.2vw 3.2vw 0;
  width: 89.6vw;
  height: 37.33vw;
  margin: 0 auto 3.2vw;
}
.platform {
  flex: 1;
  font-family: Source Sans Pro;
  font-size: 3.73vw;
  font-weight: bold;
  color: #333333;
}
.platform-img {
  width: 8vw;
  height: 8vw;
  border-radius: 1.07vw;
  margin-right: 2.13vw;
}
.top-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.2vw;
}
.know {
  margin: 0 auto;
  width: 60.8vw;
  height: 8.53vw;
  line-height: 8.53vw;
  border-radius: 1.07vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  text-align: center;
  color: #FFFFFF;
  background: linear-gradient(98deg, #006EDD 0%, #009CEC 41%, #00A5A5 100%);
}
.dialog-title {
  margin-bottom: 3vw;
  font-family: Source Han Sans CN;
font-size: 3.73vw;
font-weight: 500;
text-align: center;
color: #333333;
}
video {
  display: block;
  width: 60vw;
  height: 37.33vw;
  box-sizing: border-box;
  padding-left: 5.07vw;
  margin-bottom: 10.67vw;
}
.blue-tip {
  margin-bottom: 2.13vw;
  padding-left: 5.07vw;
  font-family: Source Han Sans CN;
  font-size: 2.67vw;
  font-weight: 500;
  color: #0A67FF;
}
.expiration-time {
  margin-bottom: 5.33vw;
  text-align: center;
  font-family: Source Han Sans CN;
  font-size: 2.67vw;
  font-weight: 500;
  color: #666666;
}
.qr {
  display: block;
  width: 30.93vw;
  height: 30.93vw;
  margin: 0 auto 2.13vw;
}
.dialog-content {
  padding-top: 3.2vw;
  margin-bottom: 3.73vw;
  box-sizing: border-box;
  width: 71.73vw;
}
.dialog-tip {
  margin: 0 auto 3.2vw;
  width: 61.33vw;
  line-height: 4.53vw;
  font-family: Source Han Sans CN;
  font-size: 3.2vw;
  font-weight: 500;
  color: #333333;
}
::v-deep .van-overlay {
  background: rgba(0,0,0,0.3);
}
::v-deep .van-popup {
  border-radius: 3.2vw;
}
</style>